/* markdownItContainer 插件相关样式 */

/* 自定义容器样式 */
.info {
  padding: 0.75em;
  margin: 0.5em 0;
  border-left: 4px solid var(--md-container-info-border);
  background-color: var(--md-container-info-bg);
}

.info > *:last-child {
  margin-bottom: 0 !important;
}

.warning {
  padding: 0.75em;
  margin: 0.5em 0;
  border-left: 4px solid var(--md-container-warning-border);
  background-color: var(--md-container-warning-bg);
}

.warning > *:last-child {
  margin-bottom: 0 !important;
}

.danger {
  padding: 0.75em;
  margin: 0.5em 0;
  border-left: 4px solid var(--md-container-danger-border);
  background-color: var(--md-container-danger-bg);
}

.danger > *:last-child {
  margin-bottom: 0 !important;
}

.success {
  padding: 0.75em;
  margin: 0.5em 0;
  border-left: 4px solid var(--md-container-success-border);
  background-color: var(--md-container-success-bg);
}

.success > *:last-child {
  margin-bottom: 0 !important;
}

/* Cell组件样式 - 基于inline-block的栅格系统 */
.md-cell {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 16px 0;
  padding: 0.5em;
  border: none;
  background: transparent;
  min-height: 100px;
  /* 消除inline-block元素间的空白间隙 */
  margin-right: -4px;
}

/* Cell宽度类 - 基于12列栅格系统 */
/* 使用精确的小数位数避免四舍五入导致的宽度超标 */
.cell-1 { width: 8.3333333333%; }  /* 1/12 */
.cell-2 { width: 16.6666666667%; } /* 2/12 */
.cell-3 { width: 25%; }            /* 3/12 */
.cell-4 { width: 33.3333333333%; } /* 4/12 */
.cell-5 { width: 41.6666666667%; } /* 5/12 */
.cell-6 { width: 50%; }            /* 6/12 */
.cell-7 { width: 58.3333333333%; } /* 7/12 */
.cell-8 { width: 66.6666666667%; } /* 8/12 */
.cell-9 { width: 75%; }            /* 9/12 */
.cell-10 { width: 83.3333333333%; } /* 10/12 */
.cell-11 { width: 91.6666666667%; } /* 11/12 */
.cell-12 { width: 100%; }          /* 12/12 */

/* 确保cell内的内容不会溢出 */
.md-cell > * {
  max-width: 100%;
}

/* cell内的图表适应容器大小 */
.md-cell .echarts-container,
.md-cell .mermaid {
  width: 100%;
}

/* 确保 cell 内的 Mermaid 图表正确显示 */
.md-cell .mermaid {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
